@extends('home.base.base')

@section('content')


    <div class="jf-container">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="/public/asserts/lib/vue/vue.js" ></script>
        <style type="text/css">
            .banner {width:685px;height:390px;overflow:hidden;}
        </style>
        <script>

            $(function(){
                var index = 1;
                var timer;
                $(".banner-right-item-group li").eq(0).css({"background":"#259bf0"});
                function animate() {
                    timer = setTimeout(function () {
                        $(".banner img").fadeOut('slow');
                        $(".banner img").eq(index).fadeIn('slow');
                        $(".banner-right-item-group li").css({"background":"#016cb9"});
                        $(".banner-right-item-group li").eq(index).css({"background":"#259bf0"});
                        index++;if(index> {{ count($query->getBannerList()) }}-1 ) index=0;
                        console.log(index);
                        animate();
                    }, 3000);
                }
                animate();


                $(".banner-right-item").click(function(){
                    clearTimeout(timer);
                    index = $(this).data("index");

                    $(".banner img").fadeOut('slow');
                    $(".banner img").eq(index).fadeIn('slow');
                    $(".banner-right-item-group li").css({"background":"#016cb9"});
                    $(".banner-right-item-group li").eq(index).css({"background":"#259bf0"});
                    index++;if(index> {{ count($query->getBannerList()) }}-1 ) index=0;
                    console.log(index);

                    animate();
                });
            });



        </script>
        <div class="jf-row">
            <div class="jf-banner-block">
                <div class="banner">
                    @foreach($query->getBannerList() as $key => $val )
                        <img src="{{ $val->cover }}" style="width:685px;height:390px;"/>

                    @endforeach
                </div>
                <div class="banner-right">
                    <ul class="banner-right-item-group">
                        @foreach($query->getBannerList() as $key => $val )
                            <li class="banner-right-item" data-index="{{$key}}"><a href="#" >{{ mb_substr($val->title,0,14) }}</a></li>
                        @endforeach

                    </ul>
                </div>
            </div>


            <style type="text/css">
                .jfn-top-login .jf-top-login{margin-bottom: 10px;}
                .jfn-top-login .jf-top-login-register{
                    position: fixed;  left: 50%; top:50%; margin: 0;  background: white;  height: auto;  border: 1px solid rgba(0,0,0,.3);  border-radius: 5px;  padding: 20px;margin-left:-150px;margin-top:-100px;
                }
                .jfn-top-login .jf-top-list-header{text-align: center;color:white;}
                .jfn-top-login .jf-login{height: 28px;background: #b11a1a;line-height: 28px;vertical-align: middle;padding: 0px 22px 0px 24px;font-size: 14px;width: 50px;cursor:pointer;margin: 0 auto;color: white;text-align: center;}
                .jfn-top-login .jf-a-button{text-decoration: none;color:#333;}
                .jfn-top-login .jf-first{text-align: center;margin:10px 0;}
                .jfn-top-login .jf-second{text-align: center;}
            </style>

            <div class="jf-top-list jfn-top-login" id="app">
                @if(!isset($loginUser))
                <div class="jf-top-login">
                    <div class="jf-top-list-header">
                        <span>用户登录</span>
                    </div>
                    <div>
                       <form id="loginForm">
                           <div class="jf-first"><label>用户名&nbsp;</label><input type="text" name="username" placeholder="账户" /></div>
                           <div class="jf-second"><label>密&nbsp;&nbsp;&nbsp;码&nbsp;</label><input type="password" name="password" placeholder="密码"/></div>
                           <div class="jf-first"><input type="checkbox" >记住 <a href="javascript:;" class="jf-a-button">忘记密码</a> <a href="javascript:;" class="jf-a-button" v-on:click="registerModalSwitch">注册新帐号</a></div>
                           <div class="jf-login" v-on:click="login">登录</div>
                       </form>
                    </div>
                </div>
                    @endif

                    @if(isset($loginUser))
                <!--登陆后的窗口-->
                <div class="jf-top-login">
                        <div><label>欢迎：{{ $loginUser->username }}</label></div>
                </div>
                    @endif

                <!--注册窗口-->
                <div class="jf-top-login jf-top-login-register"  v-show="registerModalShow" style="display:none;" >
                    <div class="jf-top-list-header">
                        <span>用户注册</span>
                    </div>
                    <div>
                        <form id="registerForm">
                            <div class="jf-first"><label>用&nbsp;户&nbsp;名&nbsp;&nbsp;</label><input type="text" name="username" placeholder="账户" /></div>
                            <div class="jf-second"><label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;</label><input type="password" name="password" placeholder="密码"/></div>
                            <div class="jf-first"><label>重复密码</label><input type="password" name="repassword" placeholder="重复密码"/></div>
                            <div>
                                <div class="jf-login" style="width:80px;float:left;" v-on:click="register">立即注册</div>
                                <div class="jf-login" style="width:80px;float:left;margin-left:10px;" v-on:click="registerModalSwitch">取&nbsp;&nbsp;消</div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="jf-top-list-header" style="text-align:left;">
                    <a href="#" class="jf-button"><span class="jf-middle">热门排行</span><span class="fa fa-play-circle jf-middle"></span></a>
                    <span class="jf-fr jf-fw"><span>周排行</span>&nbsp;|&nbsp;<span>月排行</span></span>
                </div>
                <ul class="jf-top-list-item-group">
                    @foreach($query->getTop(1,5) as $key => $val )
                        <li class="jf-top-list-item"><span class="jf-num">{{ $key+1 }}</span><a href="/post/{{$val->post_id}}" class="jf-post-title">{{mb_substr($val->title,0,19)}}</a></li>
                    @endforeach

                </ul>
            </div>

            <script type="text/javascript">
                new Vue({
                    el:"#app",
                    data:{
                        registerModalShow:false,
                        isLogin:false
                    },
                    methods:{
                        registerModalSwitch:function(){
                            this.registerModalShow = !this.registerModalShow;
                        },
                        register:function(){
                            var data = $("#registerForm").serializeArray();
                            var that = this;
                            $.post("/user/register",data,function(data){
                                alert(data.message);
                                if(data.state == 'ok'){
                                    that.registerModalShow = false;
                                }
                            },'JSON');
                        },
                        login:function(){
                            var data = $("#loginForm").serializeArray();
                            $.post("/user/login",data,function(data){
                                alert(data.message);
                                if(data.state == 'ok'){
                                    window.location.reload();
                                }
                            },'JSON');
                        }
                    }
                });
            </script>

        </div>

        <div class="jf-row">
            @if(isset($query->getAd(3)[0]))<a href="{{$query->getAd(3)[0]['url']}}"><img src="{{$query->getAd(3)[0]['cover']}}" /></a>@endif&nbsp;&nbsp;&nbsp;&nbsp;@if(isset($query->getAd(4)[0]))<a href="{{$query->getAd(4)[0]['url']}}"><img src="{{$query->getAd(4)[0]['cover']}}" /></a>@endif
        </div>

        <div class="jf-row">
            <div class="jf-col-209-365 jf-fl jf-mr18 jf-tag-color jf-relative">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button"><span class="jf-middle">热门标签</span><span class="fa fa-play-circle jf-middle"></span></a>
                </div>
                <ul class="jf-tag-group">
                    <?php $tagConfig = json_decode($query->config('tag'),true); ?>
                    @if($tagConfig)
                    @foreach($tagConfig as $key => $val )
                        @if($key < 9)
                        <li>
                            @foreach($val[0] as $k => $v)
                                <a href="/search/{{$v}}">{{$v}}</a>&nbsp;
                            @endforeach
                            <span>&gt;</span>
                            <div class="jf-sub-tag">
                                @foreach($val[1] as $k => $v)
                                    <a href="/search/{{$v}}">{{$v}}</a>
                                @endforeach
                            </div>
                        </li>
                        @endif
                    @endforeach
                    @endif
                </ul>
            </div>
            <div class="jf-col-977-365 jf-fl ">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button"><span class="jf-middle">精品推荐</span><span class="fa fa-play-circle jf-middle"></span></a>
                </div>
                <div class="jf-pannel cls">
                    @foreach($query->getRec(1,6) as $key => $val)
                        <div class="jf-img-word">
                            <div ><img src="{{$val->cover}}" style="float:left;width:185px;height:97px;"></div>
                            <div class="jf-pd-16-24">
                                <h5 ><a href="/post/{{$val->id}}" class="jf-post-title">{{$val->title}}</a></h5>
                                <div class="jf-word">
                                   {{mb_substr($val->description,0,53)}}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>

        <div class="jf-row">
            @if(isset($query->getAd(6)[0]))<a href="{{$query->getAd(6)[0]['url']}}"><img src="{{$query->getAd(6)[0]['cover']}}" /></a>@endif
        </div>

        <div class="jf-row cls">
            <div class="jf-w-881 jf-h-327 jf-fl  jf-recent">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button"><span class="jf-middle">最新资讯</span><span class="fa fa-play-circle jf-middle"></span></a>
                </div>
                <div class="jf-fl jf-w-50p  jf-pd-16">

                    @if($item = $query->getRec(2,7) && !empty($item))
                        <div class="cls">
                            <div class="jf-fl"><img  src="{{$item[0]->cover}}" style="width:179px;height:108px;" /></div>
                            <div class="jf-article">
                                <div class="jf-title"><a href="/post/{{$item[0]->id}}" class="jf-post-title">{{mb_substr($item[0]->title,0,12)}}</a></div>
                                <div class="jf-desc">{{mb_substr($item[0]->description,0,56)}}</div>
                            </div>
                        </div>
                    @endif

                    <ul  class="jf-ul">
                    @foreach($query -> getRec(2,7) as $key => $val )
                        <li class="jf-li"><span class="jf-point">·&nbsp;&nbsp;</span><a href="/post/{{$val->id}}" class="jf-post-title">{{$val->title}}</a><span class="jf-fr">{{mb_substr($val->created_at,0,10)}}</span></li>
                    @endforeach
                    </ul>

                </div>
                <div class="jf-fl jf-w-50p  jf-pd-16">
                    @if($item = $query->getRec(3,7) && !empty($item))
                        <div class="cls">
                            <div class="jf-fl"><img  src="{{$item[0]->cover}}" style="width:179px;height:108px;"  /></div>
                            <div class="jf-article">
                                <div class="jf-title"><a href="/post/{{$item[0]->id}}" class="jf-post-title">{{mb_substr($item[0]->title,0,12)}}</a></div>
                                <div class="jf-desc">{{mb_substr($item[0]->description,0,56)}}</div>
                            </div>
                        </div>
                    @endif

                    <ul  class="jf-ul">
                        @foreach($query -> getRec(2,7) as $key => $val )
                            <li class="jf-li"><span class="jf-point">·&nbsp;&nbsp;</span><a href="/post/{{$val->id}}" class="jf-post-title">{{$val->title}}</a><span class="jf-fr">{{mb_substr($val->created_at,0,10)}}</span></li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="jf-w-313 jf-h-327 jf-fl  jf-p-0-12 jf-recent2">
                @foreach($query->getRec(4,3) as $key=>$val)
                    <div class="cls">
                        <div class="jf-fl"><img src="{{$val->cover}}" style="width:109px;height:90px;"/></div>
                        <div class="jf-fl jf-article">
                            <div class='jf-title'><a href="/post/{{$val->id}}" class="jf-post-title">{{mb_substr($val->title,0,10)}}</a></div>
                            <div class="jf-desc" >{{mb_substr($val->description,0,50)}}</div>
                        </div>
                    </div>
                    @if($key < 2)
                        <div class="jf-line"></div>
                    @endif
                @endforeach
            </div>
        </div>
        <div class="jf-row cls jf-brand">
            <div class="jf-w-591 jf-h-264 jf-fl ">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button"><span class="jf-middle">品牌推荐</span><span class="fa fa-play-circle jf-middle"></span></a>
                </div>
                <div class="jf-set cls">
                    <ul>
                        @foreach($query->getFriend(2,20) as $key => $val )
                            <li class="jf-fl"><img src="{{$val->cover}}" style="width:90px;height:36px;"/></li>
                        @endforeach

                    </ul>
                </div>
            </div>
            <div class="jf-fl jf-w-22">&nbsp;</div>
            <div class="jf-w-587 jf-h-264 jf-fl ">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button"><span class="jf-middle">自媒体平台推荐</span><span class="fa fa-play-circle jf-middle"></span></a>
                </div>
                <div class="jf-set">
                    <ul class="jf-qrcode cls">
                        @foreach($query->getFriend(3,12) as $key => $val )
                            <li class="jf-fl"><img src="{{$val->cover}}" style="width:73px;height:73px;" /><div>{{$val->title}}</div></li>
                        @endforeach

                    </ul>
                </div>
            </div>
        </div>


        @include('home.base.float')
        <div class="jf-row">
        @include('home.base.friend')
        </div>


    </div>

    <!--<script>(function() {var _53code = document.createElement("script");_53code.src = "//tb.53kf.com/code/code/10131358/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script>-->



@endsection